/*
 * @Author: your name
 * @Date: 2022-03-31 12:18:52
 * @LastEditTime: 2022-04-08 17:20:48
 * @LastEditors: cxc
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \erp_background_system\src\components\myPagination\MyPagination.jsx
 */
import React, { useEffect, useState } from 'react';
import { Col, Input, message } from 'antd';
import './myPagination.css'

const Mypagination = (props) => {
    const { page, size, count, changePage } = props
    // console.log(page, size, count)
    // 保存当前第几页传递给父组件
    const [nowPage, setNowPage] = useState(page)
    // 多少页
    const [allPage, setAllPage] = useState(null)
    // 去多少页
    const [goNum, setGoNum] = useState(null)

    useEffect(() => {
        resPage()
    }, [nowPage])

    useEffect(() => {
        resAllPage()
    })

    const resAllPage = () => {
        setAllPage(Math.ceil(count / size))
    }

    // 返回当前页码
    const resPage = () => {
        changePage(nowPage)
    }

    // 切换页码
    const checkPageNum = (num) => {
        setNowPage(num)
    }

    // 点击上下页
    const checkUpDown = (type) => {
        if (type === 'up') {
            nowPage >= 1 && setNowPage(nowPage - 1)
        } else if (type === 'down') {
            nowPage <= allPage && setNowPage(nowPage + 1)
        }

    }

    // 监听input输入框的值
    const goNumChange = (e) => {
        setGoNum(e.target.value)
    }

    // 点击触发跳转更改page页码事件
    const goNowPage = () => {
        // 判断点击是否是最后一页
        if (goNum > allPage) {
            setNowPage(allPage)
            setGoNum(allPage)
            message.warning('不能大于最大页数！')
        } else if (goNum < 1) {
            setNowPage(1)
            setGoNum(1)
            message.warning('不能小于最小页数！')
        } else {
            setNowPage(Number(goNum))
        }
    }

    return (
        <Col className={'pagination'} style={{ marginTop: '10px', display: 'flex', color: '#8f8f8f' }}>
            <div style={{ color: '#767676' }}>
                {console.log(allPage)}
                总数{count}条 每页10条 {page}/{allPage}页
            </div>
            <div style={{ paddingLeft: '5px' }}>
                <button style={{ border: 'none', cursor: nowPage === 1 ? "not-allowed" : "pointer" }} disabled={nowPage === 1 ? true : false} onClick={() => { checkUpDown('up') }}>上一页</button>
                {
                    allPage && Array(allPage).fill(0).map((item, index) => {
                        return <button className={nowPage === index + 1 ? 'active' : ''} onClick={() => { checkPageNum(index + 1) }} key={index} style={{ border: 'none', background: '#ef5858', color: '#fff', height: '25px', width: '30px' }}>{index + 1}</button>
                    })
                }
                <button style={{ border: 'none', cursor: nowPage === allPage ? "not-allowed" : "pointer" }} disabled={nowPage === allPage ? true : false} onClick={() => { checkUpDown('down') }}>下一页</button>
                <Input onChange={(e) => { goNumChange(e) }} size='small' style={{ width: '30px', marginLeft: '5px' }} value={goNum} />
                <button onClick={() => { goNowPage() }} style={{ marginLeft: '5px', border: 'none', background: '#2e9de6', color: '#fff', height: '25px', width: '50px' }}>跳转</button>
            </div>
        </Col >
    );
}

export default Mypagination;
